<!--
	开发者:宋成恩
	开发时间:2017-7-9
	修改时间:2017-7-9
	功能:个人用户修改简历中的项目经验,单独的表单组件 ../PersonResume.vue中调用
-->
<template>
  <div id="resumeProjectExperienceForm">
    <el-form :model="projectExperienceInfo" :rules="projectExperienceInfoRules" ref="projectExperienceInfoForm"
             label-width="110px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="项目名称：" prop="project_name">
            <el-input v-model="projectExperienceInfo.project_name" size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="起始时间：" prop="start_date">
            <el-date-picker v-model="projectExperienceInfo.start_date" type="date" size="small" placeholder="选择起始时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="结束时间：" prop="end_date">
            <el-date-picker v-model="projectExperienceInfo.end_date" type="date" size="small" placeholder="选择结束时间"
                            :picker-options="pickerOptions" :clearable="false" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="负责部分：" prop="responsible_section">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="projectExperienceInfo.responsible_section"
                      size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="项目描述：" prop="project_description">
            <el-input type="textarea" :autosize="{ minRows: 3}" v-model="projectExperienceInfo.project_description"
                      size="small" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row v-if="projectId !== 'add'">
      <el-col :span="7" :offset="1">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片1</div>
        <upload-image-card :config="uploadConfig" :parameter="imageParameter1"
                           :defaultImageUrl="projectExperienceInfo.projects_file_url1"
                           @sendUploadImageResponse="getFirstImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="7">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片2</div>
        <upload-image-card :config="uploadConfig" :parameter="imageParameter2"
                           :defaultImageUrl="projectExperienceInfo.projects_file_url2"
                           @sendUploadImageResponse="getSecondImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="7">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片3</div>
        <upload-image-card :config="uploadConfig" :parameter="imageParameter3"
                           :defaultImageUrl="projectExperienceInfo.projects_file_url3"
                           @sendUploadImageResponse="getThirdImageResponse"></upload-image-card>
      </el-col>
    </el-row>
    <el-row v-if="projectId !== 'add'">
      <el-col :span="7" :offset="1">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片4</div>
        <upload-image-card :config="uploadConfig" :parameter="imageParameter4"
                           :defaultImageUrl="projectExperienceInfo.projects_file_url4"
                           @sendUploadImageResponse="getFourthImageResponse"></upload-image-card>
      </el-col>
      <el-col :span="7">
        <div :style="{'font-size':'1.3em','margin-top':'10px'}">作品图片2</div>
        <upload-image-card :config="uploadConfig" :parameter="imageParameter5"
                           :defaultImageUrl="projectExperienceInfo.projects_file_url5"
                           @sendUploadImageResponse="getFifthImageResponse"></upload-image-card>
      </el-col>
    </el-row>
    <div class="btn-box" :style="{'margin-top': '20px'}">
      <el-button type="info" size="large" @click="checkProjectInfoData">保存</el-button>
      <el-button type="info" size="large" @click="cancelProjectInfoEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../assets/js/post.js'
  import { formatterTime } from '../../../assets/js/common.js'
  import UploadImageCard from '@/components/common/UploadImageCard'

  export default {
    name: 'resumeProjectExperienceForm',
    props: ['resumeId', 'projectId'],
    data () {
      return {
        uploadConfig: {
          type: 'HM_RESUME_PROJECTS_IMG_ADD',
          width: '200px',
          height: '150px',
          tip: '<i style="color:red">* </i>请上传JPG或PNG格式的照片'
        },
        imageParameter1: {
          id: '',
          index: 1
        },
        imageParameter2: {
          id: '',
          index: 2
        },
        imageParameter3: {
          id: '',
          index: 3
        },
        imageParameter4: {
          id: '',
          index: 4
        },
        imageParameter5: {
          id: '',
          index: 5
        },
        projectExperienceInfo: {
          project_name: '',
          start_date: '',
          end_date: '',
          project_description: '',
          responsible_section: ''
        },
        //用于给新增表单赋值
        projectExperienceInfoSpare: {
          project_name: '',
          start_date: '',
          end_date: '',
          project_description: '',
          responsible_section: ''
        },
        projectExperienceInfoRules: {
          project_name: [
            {min: 0, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change'}
          ],
          project_description: [
            {min: 0, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'change'}
          ],
          responsible_section: [
            {min: 0, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'change'}
          ]
        },
        pickerOptions: {
          disabledDate (time) {
            return Date.now() - 8.64e7 < time.getTime()
          }
        },
      }
    },
    components: {UploadImageCard},
    created () {
      if (this.projectId !== 'add') {
        this.imageParameter1.id = this.projectId
        this.imageParameter2.id = this.projectId
        this.imageParameter3.id = this.projectId
        this.imageParameter4.id = this.projectId
        this.imageParameter5.id = this.projectId
        this.getProjectExperienceInfo()
      } else {
        this.projectExperienceInfo = this.projectExperienceInfoSpare
      }
    },
    methods: {
      getFirstImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功!')
          this.projectExperienceInfo.projects_file_url1 = data.projects_file_url
        } else {
          this.$message.error(data.message)
        }
      },
      getSecondImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功!')
          this.projectExperienceInfo.projects_file_url2 = data.projects_file_url
        } else {
          this.$message.error(data.message)
        }
      },
      getThirdImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功!')
          this.projectExperienceInfo.projects_file_url3 = data.projects_file_url
        } else {
          this.$message.error(data.message)
        }
      },
      getFourthImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功!')
          this.projectExperienceInfo.projects_file_url4 = data.projects_file_url
        } else {
          this.$message.error(data.message)
        }
      },
      getFifthImageResponse (data) {
        if (data.status === 0) {
          this.$message.success('上传成功!')
          this.projectExperienceInfo.projects_file_url5 = data.projects_file_url
        } else {
          this.$message.error(data.message)
        }
      },
      getProjectExperienceInfo () {
        let _this = this
        let parameter = new Object()
        parameter.id = this.projectId
        postDataToServer('HM_RESUME_PROJECTS_GET', parameter).then((data) => {
          if (data.status === 0) {
            _this.projectExperienceInfo = data.data_list
          }
        })
      },
      checkProjectInfoData () {
        let _this = this
        this.$refs['projectExperienceInfoForm'].validate((valid) => {
          if (valid) {
            _this.saveProjectInfoData()
          } else {
            this.$message({
              message: '存在数据填写错误！',
              type: 'error'
            })

          }
        })
      },
      saveProjectInfoData () {
        let _this = this
        let path = 'HM_RESUME_PROJECTS_EDIT'
        if (this.projectId === 'add') {
          path = 'HM_RESUME_PROJECTS_ADD'
          this.projectExperienceInfo.resume_id = this.resumeId
        }
        this.projectExperienceInfo.start_date = formatterTime('date', this.projectExperienceInfo.start_date)
        this.projectExperienceInfo.end_date = formatterTime('date', this.projectExperienceInfo.end_date)
        postDataToServer(path, this.projectExperienceInfo).then((data) => {
          if (data.status === 0) {
            _this.$emit('sendEditProjectStatus', 'success')
          } else {
            _this.$message.error(data.message)
          }
        })
      },
      cancelProjectInfoEdit () {
        this.$emit('sendEditProjectStatus', 'cancel')
      }
    }
  }
</script>
<style scoped>
  .btn-box {
    width: 90%;
    text-align: center;
  }
</style>
